<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="{% static 'css/me.css' %} ">

</head>
<body>
    <h1>视频流</h1>

    <div class="imgDiv">
        <img src="" alt="#" class="pc_voide" id="ImagePic">
    </div>
    <button id="openCamera">开启摄像头</button>
    <button id="closeCamera">关闭摄像头</button>
    <button id="openDbface">开启/关闭人脸检测</button>


</body>
<script src="{% static 'JSPlugs/Jquery/jquery-3.6.0.js'%}"></script>
<script>
    is_cap_opened = false;
    //假设每隔5秒发送一次请求
    window.onload = function () {
        get_picture()
    };

    function get_picture() {
        //设置时间 5-秒  1000-毫秒  这里设置你自己想要的时间
        setTimeout(get_picture,500);
        if (is_cap_opened){
            /*console.log("##",is_cap_opened)*/
            $.ajax({
                 type:'POST',
                 // data:{"param1":"0001","param2":"0002"}, //参数
                 async:true,//同步发送
                 dataType:'json',
                 url: "http://127.0.0.1:8000/API/send_picture/",
                 success: function(data) {
                     //将图片的Base64编码设置给src
                     $("#ImagePic").attr("src","data:image/png;base64,"+data["image"]);
                 },
                 error:function(data){
                     console.log(data);
                 }
            });
        }
    }

    /*开启摄像头*/
    function openCap(){
        console.log("开启~");
        $.ajax({
          type: 'POST',
          dataType: 'json',
          url: "http://127.0.0.1:8000/API/open_cap/",
          success: function (data) {
              //将图片的Base64编码设置给src
              //$("#ImagePic").attr("src", "data:image/png;base64," + data["image"]);
              console.log("开启摄像头成功");
          },
          error: function (data) {
              console.log(data);
          }
        });
    }

    $("#openCamera").on("click",function () {
        openCap();
        is_cap_opened=true;
    })

    /*关闭摄像头*/
    function closeCap(){
        console.log("关闭~");
        $.ajax({
          type: 'POST',
          dataType: 'json',
          url: "http://127.0.0.1:8000/API/close_cap/",
          success: function (data) {
              console.log("关闭摄像头成功");
          },
          error: function (data) {
              console.log(data);
          }
        });
    }

    $("#closeCamera").on("click",function () {
        closeCap();
        is_cap_opened=false;
    })

    /*开启人脸检测*/
    function openDBface(){
        console.log("开启 or 关闭 人脸检测");
        $.ajax({
          type: 'POST',
          dataType: 'json',
          url: "http://127.0.0.1:8000/API/open_close_dbface/",
          success: function (data) {
              console.log("~",data);
          },
          error: function (data) {
              console.log(data);
          }
        });
    }

    $("#openDbface").on("click",function () {
        openDBface();
    })

</script>
</html>